{extend name="public:base" /}

{block name="content"}

<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div class="col-lg-12">
            <div class="ibox ">
                <div class="ibox-content">
                    <style>
                        .content-box {
                            margin-top: 5px;
                        }

                        .content-box .box {
                            display: flex;
                            flex-direction: column;
                        }

                        .content-box .box .user-info {
                            display: flex;
                            width: 240px;
                            justify-content: space-between;
                            margin-bottom: 10px;
                        }

                        .content-box .box .user-info .name {
                            font-weight: bold;
                        }

                        .goods-box {
                            display: flex;
                            justify-content: space-between;
                            align-items: flex-end;
                            padding-bottom: 10px;
                        }

                        .goods-box:last-child {
                            border-bottom: none;
                        }

                        .goods-box .img {
                            width: 150px;
                            height: 120px;
                            border-radius: 5px;
                            object-fit: cover;
                        }

                        .goods-box .info {
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            flex: 1;
                            margin-left: 20px;
                            height: 120px;
                        }

                        .goods-box .info .name {
                            font-size: 18px;
                            word-break: break-all;
                            text-overflow: ellipsis;
                            display: -webkit-box;
                            -webkit-box-orient: vertical;
                            -webkit-line-clamp: 2; /* 这里是超出几行省略 */
                            overflow: hidden;
                        }

                        .goods-box .info .spec, .goods-box .info .price, .goods-box .info .count {
                            color: #999;
                        }
                    </style>

                    <form method="post">
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">下单客户</label>
                                <div class="col-sm-3">
                                    <select class="form-control user-select" name="user_id">
                                        <option value="0">请选择下单客户</option>
                                        {volist name="user_list" id="vo"}
                                        <option value="{$vo.id}">{$vo.username} / {$vo.mobile}</option>
                                        {/volist}
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">收货信息</label>
                                <div class="content-box">
                                    <div class="box address-info">

                                    </div>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">商品</label>
                                <div class="content-box">
                                    {volist name="car_list" id="vo"}
                                    <div class="goods-box">
                                        <img src="{$vo.img}" class="img">
                                        <div class="info">
                                            <div class="name">{$vo.goods_name}</div>
                                            <div class="spec">规格：{$vo.sku}</div>
                                            <div class="price">价格：￥{$vo.price}</div>
                                            <div class="count goods-count-id" data-count="{$vo.count}">数量：{$vo.count}</div>
                                        </div>
                                    </div>
                                    {/volist}
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>
                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">商品价格</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control all_price" value="{$all_price}" readonly>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">配送方式</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control" value="普通快递" readonly>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">运费</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control freight_price" value="免运费" readonly>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">优惠券</label>
                                <div class="col-sm-3">
                                    <select class="form-control user-coupon" onchange="changeCoupon(this)" name="coupon_id">
                                        <option value="0">请选择优惠券</option>
                                    </select>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="box-item">
                            <div class="form-group row">
                                <label class="col-sm-1 col-form-label">合计</label>
                                <div class="col-sm-3">
                                    <input type="text" class="form-control goods-all-price" value="{$all_price}" readonly>
                                </div>
                            </div>
                            <div class="hr-line-dashed"></div>
                        </div>

                        <div class="form-group row">
                            <div class="col-sm-4 col-sm-offset-2">
                                <button type="button" class="btn btn-w-m btn-default back-page">返回</button>
                                <button type="button" class="btn btn-w-m btn-primary" onclick="createOrder()">提交</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

{/block}

{block name="js"}
<script>
    var freight_price = 0;
    $('.user-select').change(function () {
        var user_id = $(this).val();
        var all_price = $('.all_price').val();

        $.post('/index/index/goodsCarOrderConfirm', {user_id, all_price}, res => {
            if (res.result == 1) {
                var {address, freight_info, coupon_list} = res.data;
                // 渲染收货地址
                var address_info_html = `<div class="user-info">
                                            <div class="name">${address.username ? address.username : ''}</div>
                                            <div class="mobile">${address.mobile ? address.mobile : ''}</div>
                                        </div>
                                        <div class="address">${address.address ? address.address : ''}</div>
                                        <input type="hidden" name="address_id" class="address_id" value="${address.id ? address.id : 0}">`;
                $('.address-info').html(address_info_html)

                // 渲染运费
                var count = 0;
                $('.goods-count-id').each((key, val) => {
                    count += parseInt($(val).data('count'));
                })
                freight_price = getFreightPrice(freight_info, address, count);

                if (freight_price > 0) {
                    var goods_all_price = parseFloat({$all_price});
                    var all_price = goods_all_price + parseFloat(freight_price);
                    $('.goods-all-price').val(all_price);
                    $('.freight_price').val(freight_price);
                }

                // 渲染优惠券
                var user_coupon_option = `<option value="0">请选择优惠券</option>`;
                if (coupon_list.length > 0) {
                    coupon_list.forEach(val => {
                        user_coupon_option += `<option value="${val.id}" data-price="${val.face_price}">${val.coupon_name}</option>`;
                    })
                }
                $('.user-coupon').html(user_coupon_option)
            } else {
                $('.address-info').html('')
                $('.user-coupon').html('<option value="0">请选择优惠券</option>')
                $('.freight_price').val('免运费');
            }
        }, 'json')
    })

    function getFreightPrice(freight_info, address, count) {
        var diff_freight = JSON.parse(freight_info.diff_freight);

        var init_count = freight_info.init_count;
        var init_count_price = freight_info.init_count_price;
        var inc_count = freight_info.inc_count;
        var inc_count_price = freight_info.inc_count_price;
        if (diff_freight.length > 0) {
            var is_all = diff_freight[0].is_all;
            if (is_all) {
                init_count = diff_freight[0].diff_init_count;
                init_count_price = diff_freight[0].diff_init_count_price;
                inc_count = diff_freight[0].diff_inc_count;
                inc_count_price = diff_freight[0].diff_inc_count_price;
            } else {
                if (address.id != undefined) {
                    var find_city = false;
                    for (var i = 0; i < diff_freight.length; i++) {
                        if (diff_freight[i].city_ids.indexOf(address.city_id) != -1) {
                            init_count = diff_freight[i].diff_init_count;
                            init_count_price = diff_freight[i].diff_init_count_price;
                            inc_count = diff_freight[i].diff_inc_count;
                            inc_count_price = diff_freight[i].diff_inc_count_price;
                            find_city = true;
                            break;
                        }
                    }
                    if (!find_city) {
                        for (var j = 0; j < diff_freight.length; j++) {
                            if (diff_freight[j].province_ids.indexOf(address.province_id) != -1) {
                                init_count = diff_freight[j].diff_init_count;
                                init_count_price = diff_freight[j].diff_init_count_price;
                                inc_count = diff_freight[j].diff_inc_count;
                                inc_count_price = diff_freight[j].diff_inc_count_price;
                                break;
                            }
                        }
                    }
                }
            }
        }

        var inc_price = 0;
        if (count > init_count && init_count > 0) {
            inc_price = Math.ceil((parseInt(count) - parseInt(init_count)) / parseInt(inc_count)) * inc_count_price;
        }
        var freight = parseFloat(init_count_price) + parseFloat(inc_price);

        return freight.toFixed(2);
    }

    function changeCoupon(that) {
        var face_price = parseFloat($(that).data('price'));
        var goods_all_price = parseFloat({$all_price});
        var all_price = goods_all_price + parseFloat(freight_price) - face_price;
        $('.goods-all-price').val(all_price);
    }

    function createOrder() {
        var user_id = $('.user-select').val();
        var coupon_id = $('.user-coupon').val();
        var all_price = parseFloat({$all_price});
        var pay_price = $('.goods-all-price').val();
        var address_id = $('.address_id').val();

        $.post('/index/index/addGoodsCarOrder', {user_id, coupon_id, all_price, freight_price, pay_price, address_id}, res => {
            if(res.result == 1){
                layer.msg(res.msg);
                setTimeout(function (){
                    window.location.href = "{:url('chooseGoodsList')}";
                }, 500)
            }else{
                layer.msg(res.msg);
            }
        }, 'json')
    }
</script>{/block}